<template>
  <div id="mainCharts" style="width: 1300px;height: 550px"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import {onMounted} from "vue";

const genChartOptions1 = () => {
  return {
    legend: {
      show: true,
      data: ['销量']
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "销量",
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  };
}

const initECharts = () => {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('mainCharts'));
  // 绘制图表
  let options1 = genChartOptions1()
  myChart.setOption(options1);
}
onMounted(() => {
  initECharts()
})
</script>


<style scoped>

</style>